<ui:composition template="templateProveedor.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<!-- Tiene que tener un head para que tome primefaces -->
	<h:head></h:head>
	
	<ui:define name="versionListar">
	
	<div class="table-responsive">
		<h:form id="form" class="panel panel-primary">
		                
		    <p:growl id="messages" showDetail="true" />
		    
		    <p:dataTable id="dataTable" var="version" value="#{versionBean.versionesProveedor}" editable="true" styleClass="table table-hover">

		        <f:facet name="header" styleClass="table-header">Versiones</f:facet>

		        <p:ajax event="rowEdit" listener="#{versionBean.onEditVersionCD}" update=":form:messages" />  
		        <p:ajax event="rowEditCancel" listener="#{versionBean.onCancelVersionCD}" update=":form:messages" />
		        		        
		        <p:column style="text-align:center; width:auto;" headerText="Nombre">		        
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{version.nombre}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <p:inputText value="#{version.nombre}" itemValue="#{version.nombre}" var="#{version.nombre}" style="width:100%"/>  
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Numero">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{version.numero}" />  
		                </f:facet>
		                <f:facet name="input">
		                    <p:inputText value="#{version.numero}" itemValue="#{version.numero}" var="#{version.numero}" style="width:100%"/>  
		                </f:facet>
		            </p:cellEditor>		            
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Precio">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{version.precio}" />  
		                </f:facet>
		                <f:facet name="input">  
		                    <p:inputText value="#{version.precio}" itemValue="#{version.precio}" var="#{version.precio}" style="width:100%"/>  
		                </f:facet>
					</p:cellEditor>
		        </p:column>

		        <p:column style="text-align:center; width:auto;" headerText="Estado">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{version.estadoAprobacion}" />  
		                </f:facet>
		                <f:facet name="input">  
							<h:outputText value="#{version.estadoAprobacion}" />
		                </f:facet>
					</p:cellEditor>
		        </p:column>
		        
		        <p:column style="text-align:center; width:auto;" headerText="Contenido Digital">
					<p:cellEditor>
		                <f:facet name="output">  
		                    <h:outputText value="#{version.contDig.nombre}" />  
		                </f:facet>
		                <f:facet name="input">
							<h:outputText value="#{version.contDig.nombre}" />
		                </f:facet>
		            </p:cellEditor>
		        </p:column>
				
		        <p:column style="text-align:center; width:auto;"><p:rowEditor /></p:column> 

				<p:column style="text-align:center; width:auto;"> 
			  		<p:growl id="eliminar" showDetail="true" />
				    <p:commandButton update="dataTable,eliminar" icon="ui-icon-trash" actionListener="#{versionBean.postEliminarVersionCD(version.idVersion)}">
				        <p:confirm header="Confirmacion" message="¿Seguro que desea eliminar el contenido digital?" icon="ui-icon-alert"/>					          
				    </p:commandButton>					  
				    <p:confirmDialog global="true" showEffect="fade" hideEffect="explode">
				        <p:commandButton value="Si" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
				        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
				    </p:confirmDialog>
				</p:column>
		    </p:dataTable>

		
		    <p:blockUI block="dataTable" trigger="dataTable">LOADING<br /></p:blockUI>		
		</h:form>
	</div>
	</ui:define>
</ui:composition>

